<template>
  <view class="test-container">
    <view class="header">
      <text class="title">活动数据测试</text>
      <button @click="loadActivities" :loading="loading">刷新数据</button>
    </view>
    
    <view class="data-info">
      <text class="info-text">数据状态: {{ dataStatus }}</text>
      <text class="info-text">活动数量: {{ activityList.length }}</text>
    </view>
    
    <view class="activity-list">
      <view v-for="(activity, index) in activityList" :key="index" class="activity-item">
        <view class="activity-header">
          <text class="activity-name">{{ activity.name }}</text>
          <text class="activity-status" :class="getStatusClass(activity.status)">
            {{ getStatusText(activity.status) }}
          </text>
        </view>
        <view class="activity-details">
          <text class="activity-desc">{{ activity.description }}</text>
          <text class="activity-location">地点: {{ activity.location }}</text>
          <text class="activity-time">时间: {{ formatDate(activity.startTime) }} - {{ formatDate(activity.endTime) }}</text>
          <text class="activity-points">积分: {{ activity.points }}</text>
        </view>
        <view class="activity-cover" v-if="activity.cover">
          <image :src="activity.cover" mode="aspectFill" class="cover-image"></image>
        </view>
      </view>
    </view>
    
    <view v-if="loading" class="loading">
      <text>加载中...</text>
    </view>
    
    <view v-if="!loading && activityList.length === 0" class="empty">
      <text>暂无活动数据</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activityList: [],
      loading: false,
      dataStatus: '未加载'
    }
  },
  
  onLoad() {
    this.loadActivities()
  },
  
  methods: {
    async loadActivities() {
      this.loading = true
      this.dataStatus = '加载中...'
      
      try {
        console.log('开始获取活动数据...')
        const response = await uni.request({
          url: 'http://localhost:8080/activity/list',
          method: 'GET',
          header: {
            'Content-Type': 'application/json'
          }
        })
        
        console.log('API响应:', response)
        
        if (response.statusCode === 200 && response.data.code === 200) {
          this.activityList = response.data.data || []
          this.dataStatus = '加载成功'
          console.log('活动数据:', this.activityList)
        } else {
          this.dataStatus = '加载失败: ' + (response.data.message || '未知错误')
          console.error('API错误:', response.data)
        }
      } catch (error) {
        this.dataStatus = '网络错误: ' + error.message
        console.error('网络错误:', error)
      } finally {
        this.loading = false
      }
    },
    
    formatDate(dateString) {
      if (!dateString) return '待定'
      const date = new Date(dateString)
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
    },
    
    getStatusClass(status) {
      switch (status) {
        case 'UPCOMING':
          return 'upcoming'
        case 'ONGOING':
          return 'ongoing'
        case 'ENDED':
          return 'ended'
        default:
          return 'upcoming'
      }
    },
    
    getStatusText(status) {
      switch (status) {
        case 'UPCOMING':
          return '即将开始'
        case 'ONGOING':
          return '进行中'
        case 'ENDED':
          return '已结束'
        default:
          return '即将开始'
      }
    }
  }
}
</script>

<style scoped>
.test-container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 20rpx;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.data-info {
  background: #fff;
  padding: 20rpx;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}

.info-text {
  display: block;
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.activity-list {
  background: #fff;
  border-radius: 10rpx;
  padding: 20rpx;
}

.activity-item {
  border: 1rpx solid #eee;
  border-radius: 10rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.activity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
}

.activity-name {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

.activity-status {
  font-size: 24rpx;
  padding: 4rpx 12rpx;
  border-radius: 20rpx;
}

.activity-status.upcoming {
  background: #e3f2fd;
  color: #1976d2;
}

.activity-status.ongoing {
  background: #e8f5e8;
  color: #388e3c;
}

.activity-status.ended {
  background: #ffebee;
  color: #d32f2f;
}

.activity-details {
  margin-bottom: 15rpx;
}

.activity-desc {
  display: block;
  font-size: 26rpx;
  color: #666;
  margin-bottom: 10rpx;
  line-height: 1.4;
}

.activity-location,
.activity-time,
.activity-points {
  display: block;
  font-size: 24rpx;
  color: #999;
  margin-bottom: 5rpx;
}

.activity-cover {
  margin-top: 15rpx;
}

.cover-image {
  width: 200rpx;
  height: 120rpx;
  border-radius: 8rpx;
}

.loading,
.empty {
  text-align: center;
  padding: 60rpx;
  color: #999;
  font-size: 28rpx;
}
</style>
